<template>
	<div class="system-user-container">
		<el-card shadow="hover">
			<span>今日新增：{{ topData.todayNum }}</span>
			<span class="ml20">邀请用户：{{ topData.invitation }}</span>
			<span class="ml20">累计用户：{{ topData.total }}</span>
		</el-card>
		<el-card shadow="hover" class="filtering">
			<div class="filtering-list-flex">
				<div class="filtering-list-title">用户昵称</div>
				<div class="filtering-list-item"><el-input v-model="filtering.input1" style="max-width: 180px" placeholder="请输入用户名称"></el-input></div>
			</div>
			<div class="filtering-list-flex">
				<div class="filtering-list-title">用户id</div>
				<div class="filtering-list-item"><el-input v-model="filtering.input2" style="max-width: 180px" placeholder="请输入用户id"></el-input></div>
			</div>
			<div class="filtering-list-flex">
				<div class="filtering-list-title">注册时间</div>
				<div class="filtering-list-item">
					<el-date-picker
					      v-model="filtering.pickData"
					      type="daterange"
					      start-placeholder="开始日期"
					      end-placeholder="结束日期"
					    ></el-date-picker>
				</div>
			</div>
			<div class="form-search-footer mt20">
				<el-button :loading="tableData.loading" type="primary" @click="formFind">查询</el-button>
				<el-button @click="formReset">重置</el-button>
			</div>
		</el-card>
		<el-card shadow="hover" class="mt5">
			<el-table v-loading="tableData.loading" :data="tableData.data" stripe highlight-current-row :header-cell-style="{ color: '#7f8da6', backgroundColor: '#F5F6F8' }">
				<el-table-column prop="userId" label="ID" show-overflow-tooltip width="50"></el-table-column>
				<el-table-column prop="openid" label="openid" show-overflow-tooltip></el-table-column>
				<el-table-column prop="realName" label="昵称" show-overflow-tooltip min-width="110"></el-table-column>
				<el-table-column prop="phone" label="手机号" show-overflow-tooltip width="110"></el-table-column>
				<el-table-column prop="createTime" label="注册时间" show-overflow-tooltip width="150"></el-table-column>
				<el-table-column prop="auth" label="实名认证" show-overflow-tooltip min-width="110">
					<template #default="scope">
						<span>{{ scope.row.userName }} / {{ scope.row.idCard }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="isAgent" label="代理权限" show-overflow-tooltip width="70">
					<template #default="scope">
						<span>{{ filterdlqx(scope.row.isAgent) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="orderNum" label="订单记录" show-overflow-tooltip></el-table-column>
				<el-table-column prop="address" label="收货地址" show-overflow-tooltip></el-table-column>

				<el-table-column prop="balance" label="零钱" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ filterMoney(scope.row.balance) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="consumption" label="累计消费" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ filterMoney(scope.row.consumption) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="bonus" label="累计红包" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ filterMoney(scope.row.bonus) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="withdrawal" label="累计提现" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ filterMoney(scope.row.withdrawal) }}</span>
					</template>
				</el-table-column>

				<el-table-column prop="path" label="操作" width="90" fixed="right">
					<template #default="scope">
						<el-button size="mini" v-if="scope.row.state === 1" type="danger" @click="frozen(scope.row)">冻结</el-button>
						<el-button size="mini" v-if="scope.row.state === 2" type="success" @click="thaw(scope.row)">解冻</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				v-show="tableData.total > 0"
				:total="tableData.total"
				v-model:page="tableData.param.pageNum"
				v-model:limit="tableData.param.pageSize"
				@pagination="getList"
			/>
		</el-card>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted } from 'vue'
import Pagination from '/@/components/Pagination/index.vue'
import { yesOrNo } from '/@/dictionaries/overall'
import { formatDate } from '/@/utils/formatTime'
import { statusFilter, verifyNumberComma } from '/@/utils/toolsValidate'
import { ElMessageBox, ElMessage } from 'element-plus'
import { getUserList, freezeUser } from '/@/api/member'

export default {
	name: 'member',
	components: { Pagination },
	setup() {
		const state: any = reactive({
			topData: {
				todayNum: 0,
				invitation: 0,
				total: 0
			},
			filtering: {
				input1: '',
				input2: '',
				pickData: []
			},
			tableData: {
				data: [],
				loading: false,
				total: 0,
				param: {
					pageNum: 1,
					pageSize: 10
				}
			}
		})
		// 初始化表格数据
		const initTableData = () => {
			state.tableData.loading = true

			const params = {
				realName: state.filtering.input1,
				id: state.filtering.input2,
				startTime: state.filtering.pickData[0] ? formatDate(new Date(state.filtering.pickData[0]), 'YYYY-mm-dd') : '',
				endTime: state.filtering.pickData[1] ? formatDate(new Date(state.filtering.pickData[1]), 'YYYY-mm-dd') : '',
				pageNum: state.tableData.param.pageNum,
				pageSize: state.tableData.param.pageSize
			}

			getUserList(params)
				.then(res => {
					const { datas } = res

					state.tableData.data = datas.list.list
					state.tableData.total = datas.list.total

					state.topData.todayNum = datas.todayNum
					state.topData.total = datas.total
				})
				.finally(() => {
					state.tableData.loading = false
				})
		}
		const filterdlqx = (val: Number) => {
			return statusFilter(val, yesOrNo)
		}
		const filterMoney = (money: Number) => {
			return verifyNumberComma(money)
		}
		// 冻结
		const frozen = (row: object) => {
			ElMessageBox.confirm('此操作将冻结该用户, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				const params = {
					userId: row.userId,
					freeze: 2
				}

				freezeUser(params).then(() => {
					ElMessage.success('冻结成功！')
					initTableData()
				})
			})
		}
		// 解冻
		const thaw = (row: object) => {
			ElMessageBox.confirm('此操作将解冻该用户, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				const params = {
					userId: row.userId,
					freeze: 1
				}

				freezeUser(params).then(() => {
					ElMessage.success('解冻成功！')
					initTableData()
				})
			})
		}
		const getList = val => {
			state.tableData.param.pageNum = val.page
			state.tableData.param.pageSize = val.limit
			initTableData()
		}
		const formFind = () => {
			initTableData()
		}
		const formReset = () => {
			state.filtering.input1 = ''
			state.filtering.input2 = ''
			state.filtering.pickData = []
			initTableData()
		}
		// 页面加载时
		onMounted(() => {
			initTableData()
		})
		return {
			filterdlqx,
			filterMoney,
			frozen,
			thaw,
			getList,
			formFind,
			formReset,
			...toRefs(state)
		}
	}
}
</script>

<style scoped lang="scss"></style>
